import React, { useState, useEffect } from 'react';
import { Button, Input, Menu, Dropdown } from 'antd';
import styles from './index.less';

const prettier = require('prettier/standalone');
const plugins = [require('prettier/parser-html')];

export default class extends React.Component {
  componentDidMount = () => {
    var str = `<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title></title>
    
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/lib/codemirror.css" rel="external nofollow" >
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/fold/foldgutter.css" rel="external nofollow" >
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/hint/show-hint.css" rel="external nofollow" >
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/lint/lint.css" rel="external nofollow" >
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/merge/merge.css" rel="external nofollow"/>
    
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/display/fullscreen.css" rel="external nofollow"/>
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/theme/monokai.css" rel="external nofollow"/>
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/theme/eclipse.css" rel="external nofollow"/>
      <link rel="stylesheet" href="<%= context.config.publicPath %>lib/codemirror-5.31.0/theme/midnight.css" rel="external nofollow"/>
    </head>
    
    <body>
      <div id="root">
        
      </div>
    </body>
    
    </html>
    <!-- dag图 -->
    <script src="<%= context.config.publicPath %>lib/d3/d3.min.js"></script>
    <script src="<%= context.config.publicPath %>lib/d3/dagre-d3.js"></script>
    
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/lib/codemirror.js"></script>
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/comment/comment.js"></script>
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/selection/active-line.js"></script>
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/keymap/sublime.js"></script>
    
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/hint/show-hint.js"></script>
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/hint/sql-hint.js"></script>
    
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/mode/python/python.js"></script> 
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/mode/sql/sql.js"></script> 
    
              <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/fold/foldcode.js"></script>
                 <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/fold/foldgutter.js"></script>
               <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/fold/brace-fold.js"></script>
                   <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/fold/indent-fold.js"></script>
              <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/fold/comment-fold.js"></script>
              <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/edit/closebrackets.js"></script>
              <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/edit/matchbrackets.js"></script>
              
              <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/mode/clike/clike.js"></script>
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/display/autorefresh.js"></script>
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/display/fullscreen.js"></script>
    
    <script src="<%= context.config.publicPath %>lib/codemirror-5.31.0/addon/merge/merge.js"></script>
    <script src ="http://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
    
    `;

    var aa = prettier.format(str, {
      parser: 'html',
      plugins,
    });
    console.log(aa);
  };
  render() {
    return <div>{22222}</div>;
  }
}
